<template>
  <div class="col"
       :style="colStyle"
       :class="colClass">
    <slot />
  </div>
</template>

<script lang="ts">
let validator = (value) => {
  let keys = Object.keys(value);
  let valid = true;
  keys.forEach((key) => {
    if (!["span", "offset"].includes(key)) {
      valid = false;
    }
  });
  return valid;
};
import { inject, computed, toRefs, reactive } from "vue";
export default {
  props: {
    span: { type: [Number, String] },
    offset: { type: [Number, String] },
    ipad: {
      type: Object,
      validator,
    },
    narrowPc: {
      type: Object,
      validator,
    },
    pc: {
      type: Object,
      validator,
    },
    widePc: {
      type: Object,
      validator,
    },
  },
  setup(props) {
    const { span, offset, ipad, narrowPc, pc, widePc } = toRefs(props);

    const gutter = inject("gutter");

    const colStyle = computed(() => {
      return {
        paddingLeft: gutter / 2 + "px",
        paddingRight: gutter / 2 + "px",
      };
    });
    const createClasses = (obj: object, str = "") => {
      let array = [];
      if (!obj) return [];
      if (obj.value) {
        obj.value.span ? array.push(`col-${str}${obj.value.span}`) : [];
        obj.value.offset ? array.push(`offset-${str}${obj.value.offset}`) : [];
      } else if (obj) {
        obj.span ? array.push(`col-${str}${obj.span.value}`) : [];
        obj.offset ? array.push(`offset-${str}${obj.offset.value}`) : [];
      }
      return array;
    };
    const colClass = computed(() => {
      return [
        ...createClasses({ span, offset }),
        ...createClasses(ipad, "iPad-"),
        ...createClasses(narrowPc, "narrow-pc-"),
        ...createClasses(pc, "pc-"),
        ...createClasses(widePc, "wide-pc-"),
      ];
    });

    return {
      gutter,
      colStyle,
      colClass,
    };
  },
};
</script>

<style lang="scss" scoped>
.col {
  // width: 50%;
  // 响应式布局
  // 默认手机
  $class-prefix: col-;
  img {
    max-width: 100%;
  }
  @for $n from 1 through 24 {
    &.#{$class-prefix}#{$n} {
      width: ($n / 24) * 100%;
    }
  }

  $class-prefix: offset-;
  @for $n from 1 through 24 {
    &.#{$class-prefix}#{$n} {
      margin-left: ($n / 24) * 100%;
    }
  }

  // iPad
  @media (min-width: 576px) and (max-width: 768px) {
    $class-prefix: col-iPad-;
    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n / 24) * 100%;
      }
    }
    $class-prefix: offset-iPad-;
    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n / 24) * 100%;
      }
    }
  }

  // narrow-pc
  @media (min-width: 769px) and (max-width: 992px) {
    $class-prefix: col-narrow-pc-;
    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n / 24) * 100%;
      }
    }
    $class-prefix: offset-narrow-pc-;
    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n / 24) * 100%;
      }
    }
  }

  // pc
  @media (min-width: 993px) and (max-width: 1200px) {
    $class-prefix: col-pc-;
    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n / 24) * 100%;
      }
    }
    $class-prefix: offset-pc-;
    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n / 24) * 100%;
      }
    }
  }
  @media (min-width: 1200px) {
    $class-prefix: col-wide-pc-;
    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        width: ($n / 24) * 100%;
      }
    }
    $class-prefix: offset-wide-pc-;
    @for $n from 1 through 24 {
      &.#{$class-prefix}#{$n} {
        margin-left: ($n / 24) * 100%;
      }
    }
  }
}
</style>
